<template>
  <div class="common-container">
    <h2 class="r-title">广州周边目的地</h2>
    <div class="bd">
      <ul class="clearfix">
        <li class="item">
          <div class="img">
            <a href="/travel-scenic-spot/mafengwo/10189.html" target="_blank">
              <img
                class="lazy"
                data-original="https://p1-q.mafengwo.net/s16/M00/CB/99/CoUBUl_ayEyAHMFvAACmSXBwtEo25.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                height="200"
                width="320"
                src="https://p1-q.mafengwo.net/s16/M00/CB/99/CoUBUl_ayEyAHMFvAACmSXBwtEo25.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                style="display: inline"
              />
            </a>
          </div>
          <dl class="caption">
            <dt>
              <a href="/travel-scenic-spot/mafengwo/10189.html" target="_blank"><strong>香港</strong><br /><b>40602</b>人去过</a>
            </dt>
            <dd>
              <a href="/poi/520.html" target="_blank">香港迪士尼乐园</a>
              <span class="divide"></span>
              <a href="/poi/488.html" target="_blank">香港海洋公园</a>
              <span class="divide"></span>
              <a href="/poi/518.html" target="_blank">太平山顶</a>
            </dd>
          </dl>
        </li>
        <li class="item">
          <div class="img">
            <a href="/travel-scenic-spot/mafengwo/10206.html" target="_blank">
              <img
                class="lazy"
                data-original="https://p1-q.mafengwo.net/s16/M00/A5/A8/CoUBUl_gP5GAfBmPAAE0eIK35wU80.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                height="200"
                width="320"
                src="https://p1-q.mafengwo.net/s16/M00/A5/A8/CoUBUl_gP5GAfBmPAAE0eIK35wU80.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                style="display: inline"
              />
            </a>
          </div>
          <dl class="caption">
            <dt>
              <a href="/travel-scenic-spot/mafengwo/10206.html" target="_blank"><strong>澳门</strong><br /><b>24709</b>人去过</a>
            </dt>
            <dd>
              <a href="/poi/1613.html" target="_blank">大三巴牌坊</a>
              <span class="divide"></span>
              <a href="/poi/4198.html" target="_blank">澳门渔人码头</a>
              <span class="divide"></span>
              <a href="/poi/5430032.html" target="_blank">议事亭前地</a>
            </dd>
          </dl>
        </li>
        <li class="item">
          <div class="img">
            <a href="/travel-scenic-spot/mafengwo/10198.html" target="_blank">
              <img
                class="lazy"
                data-original="https://p1-q.mafengwo.net/s17/M00/E3/9C/CoUBXl_cawCAQWMcAAGGhEoBcRU77.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                height="200"
                width="320"
                src="https://p1-q.mafengwo.net/s17/M00/E3/9C/CoUBXl_cawCAQWMcAAGGhEoBcRU77.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                style="display: inline"
              />
            </a>
          </div>
          <dl class="caption">
            <dt>
              <a href="/travel-scenic-spot/mafengwo/10198.html" target="_blank"><strong>深圳</strong><br /><b>33139</b>人去过</a>
            </dt>
            <dd>
              <a href="/poi/29043.html" target="_blank">东部华侨城</a>
              <span class="divide"></span>
              <a href="/poi/9952.html" target="_blank">莲花山公园</a>
              <span class="divide"></span>
              <a href="/poi/78158.html" target="_blank">西涌海滩</a>
            </dd>
          </dl>
        </li>
        <li class="item">
          <div class="img">
            <a href="/travel-scenic-spot/mafengwo/10269.html" target="_blank">
              <img
                class="lazy"
                data-original="https://p1-q.mafengwo.net/s17/M00/E4/09/CoUBXl_ca6uAG1S9AABwZQOSis855.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                height="200"
                width="320"
                src="https://p1-q.mafengwo.net/s17/M00/E4/09/CoUBXl_ca6uAG1S9AABwZQOSis855.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                style="display: inline"
              />
            </a>
          </div>
          <dl class="caption">
            <dt>
              <a href="/travel-scenic-spot/mafengwo/10269.html" target="_blank"><strong>珠海</strong><br /><b>17670</b>人去过</a>
            </dt>
            <dd>
              <a href="/poi/7048802.html" target="_blank">珠海长隆海洋王国</a>
              <span class="divide"></span>
              <a href="/poi/2452.html" target="_blank">外伶仃岛</a>
              <span class="divide"></span>
              <a href="/poi/7048821.html" target="_blank">珠海横琴长隆国际海洋度假区</a>
            </dd>
          </dl>
        </li>
        <li class="item">
          <div class="img">
            <a href="/travel-scenic-spot/mafengwo/11475.html" target="_blank">
              <img
                class="lazy"
                data-original="https://p1-q.mafengwo.net/s6/M00/57/57/wKgB4lIlVk6AIMCDAAStueA6sSU73.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                height="200"
                width="320"
                src="https://p1-q.mafengwo.net/s6/M00/57/57/wKgB4lIlVk6AIMCDAAStueA6sSU73.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                style="display: inline"
              />
            </a>
          </div>
          <dl class="caption">
            <dt>
              <a href="/travel-scenic-spot/mafengwo/11475.html" target="_blank"><strong>惠州</strong><br /><b>7220</b>人去过</a>
            </dt>
            <dd>
              <a href="/poi/6563454.html" target="_blank">双月湾</a>
              <span class="divide"></span>
              <a href="/poi/6982105.html" target="_blank">巽寮湾</a>
              <span class="divide"></span>
              <a href="/poi/431.html" target="_blank">惠州西湖</a>
            </dd>
          </dl>
        </li>
        <li class="item">
          <div class="img">
            <a href="/travel-scenic-spot/mafengwo/13394.html" target="_blank">
              <img
                class="lazy"
                data-original="https://p1-q.mafengwo.net/s17/M00/E3/DF/CoUBXl_ca2qAOF02AADQ3j7HR1U29.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                height="200"
                width="320"
                src="https://p1-q.mafengwo.net/s17/M00/E3/DF/CoUBXl_ca2qAOF02AADQ3j7HR1U29.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                style="display: inline"
              />
            </a>
          </div>
          <dl class="caption">
            <dt>
              <a href="/travel-scenic-spot/mafengwo/13394.html" target="_blank"><strong>佛山</strong><br /><b>9659</b>人去过</a>
            </dt>
            <dd>
              <a href="/poi/6328178.html" target="_blank">清晖园</a>
              <span class="divide"></span>
              <a href="/poi/5440105.html" target="_blank">佛山祖庙</a>
              <span class="divide"></span>
              <a href="/poi/6628039.html" target="_blank">岭南天地</a>
            </dd>
          </dl>
        </li>
        <li class="item">
          <div class="img">
            <a href="/travel-scenic-spot/mafengwo/10779.html" target="_blank">
              <img
                class="lazy"
                data-original="https://p1-q.mafengwo.net/s5/M00/12/AC/wKgB3FIMRvaAdrjoAAGCmIetJvQ75.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                height="200"
                width="320"
                src="https://p1-q.mafengwo.net/s5/M00/12/AC/wKgB3FIMRvaAdrjoAAGCmIetJvQ75.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                style="display: inline"
              />
            </a>
          </div>
          <dl class="caption">
            <dt>
              <a href="/travel-scenic-spot/mafengwo/10779.html" target="_blank"><strong>韶关</strong><br /><b>6252</b>人去过</a>
            </dt>
            <dd>
              <a href="/poi/387.html" target="_blank">丹霞山</a>
              <span class="divide"></span>
              <a href="/poi/5429037.html" target="_blank">广东大峡谷</a>
              <span class="divide"></span>
              <a href="/poi/5436090.html" target="_blank">南华禅寺</a>
            </dd>
          </dl>
        </li>
        <li class="item">
          <div class="img">
            <a href="/travel-scenic-spot/mafengwo/12334.html" target="_blank">
              <img
                class="lazy"
                data-original="https://p1-q.mafengwo.net/s17/M00/E3/F9/CoUBXl_ca5mAc3vnAAFfivNLGIE06.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                height="200"
                width="320"
                src="https://p1-q.mafengwo.net/s17/M00/E3/F9/CoUBXl_ca5mAc3vnAAFfivNLGIE06.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                style="display: inline"
              />
            </a>
          </div>
          <dl class="caption">
            <dt>
              <a href="/travel-scenic-spot/mafengwo/12334.html" target="_blank"><strong>东莞</strong><br /><b>10357</b>人去过</a>
            </dt>
            <dd>
              <a href="/poi/6645584.html" target="_blank">松山湖风景区</a>
              <span class="divide"></span>
              <a href="/poi/10807.html" target="_blank">可园博物馆</a>
              <span class="divide"></span>
              <a href="/poi/5432867.html" target="_blank">广东观音山国家森林公园</a>
            </dd>
          </dl>
        </li>
        <li class="item">
          <div class="img">
            <a href="/travel-scenic-spot/mafengwo/10514.html" target="_blank">
              <img
                class="lazy"
                data-original="https://p1-q.mafengwo.net/s6/M00/C8/AB/wKgB4lMNziCASS7YAADtzNGSAUU44.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                height="200"
                width="320"
                src="https://p1-q.mafengwo.net/s6/M00/C8/AB/wKgB4lMNziCASS7YAADtzNGSAUU44.jpeg?imageMogr2%2Fthumbnail%2F%21320x200r%2Fgravity%2FCenter%2Fcrop%2F%21320x200%2Fquality%2F100"
                style="display: inline"
              />
            </a>
          </div>
          <dl class="caption">
            <dt>
              <a href="/travel-scenic-spot/mafengwo/10514.html" target="_blank"><strong>中山</strong><br /><b>8278</b>人去过</a>
            </dt>
            <dd>
              <a href="/poi/2697.html" target="_blank">孙中山故居纪念馆</a>
              <span class="divide"></span>
              <a href="/poi/6326048.html" target="_blank">中山城-中山影视城</a>
              <span class="divide"></span>
              <a href="/poi/7922775.html" target="_blank">缤纷幻彩摩天轮</a>
            </dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.common-container {
  width: 1000px;
  margin: 0 auto;
  .r-title {
    margin-bottom: 35px;
    text-align: left;
    font-size: 26px;
    color: #333;
    font-weight: normal;
    line-height: 30px;
  }
  ul {
    margin-right: -25px;
    .item {
      float: left;
      width: 320px;
      height: 346px;
      display: inline;
      margin: 0 20px 30px 0;
      &:hover {
        box-shadow: 0 0 4px rgb(0 0 0 / 10%);
        .caption dt strong {
          color: #192885;
        }
      }
      .img {
        height: 200px;
        overflow: hidden;
        position: relative;
      }
      .caption {
        height: 125px;
        padding: 10px 20px;
        border: 1px solid #f2f2f2;
        border-top: 0 none;
        dt {
          padding: 5px 0 12px;
          text-align: center;
          font-size: 14px;
          border-bottom: 1px solid #f5f5f5;
          line-height: 20px;
          a {
            display: block;
            color: #999;
          }
          strong {
            font-size: 24px;
            font-weight: normal;
            color: #333;
            line-height: 30px;
          }
          b {
            color: #192885;
          }
        }
        dd {
          height: 20px;
          margin-top: 15px;
          font-size: 14px;
          line-height: 20px;
          overflow: hidden;
          a {
            color: #666;
            &:hover {
              outline: 0;
              text-decoration: underline;
              color: #192885;
            }
          }
          .divide {
            display: inline-block;
            width: 1px;
            height: 10px;
            background-color: #dadada;
            margin: 0 10px;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>
